<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="plugin/element-ui/index.css">
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
    <div id="f_login_app">
        <div class="header">
            <div class="logo"><img src="img/logo_new.png"/><span>用户注册</span></div>
            <div class="login_info">已有账号？<a href="page/login.html">请登录</a></div>
        </div>
        <div class="main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item prop="username">
                    <el-input
                            placeholder="请输入用户名"
                            v-model="ruleForm.username">
                        <i style="margin-top: 14px" slot="prefix" class="el-icon-user"></i>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input
                            placeholder="请输入密码"
                            v-model="ruleForm.password">
                        <i style="margin-top: 14px" slot="prefix" class="el-icon-lock"></i>
                    </el-input>
                </el-form-item>

                <el-form-item prop="checkPass">
                    <el-input
                            placeholder="确认密码" @change="checkPwd" v-model="ruleForm.checkPass">
                    </el-input>
                </el-form-item>

                <el-form-item prop="eMail">
                    <el-input
                            placeholder="邮箱"
                            v-model="ruleForm.eMail">
                        <i style="margin-top: 14px" slot="prefix" class="el-icon-message mailInput"></i>
                        <i style="margin-top: 14px" slot="suffix">@qq.com</i>
                    </el-input>

                </el-form-item>

                <el-input
                        style="width: 50%"
                        placeholder="验证码"
                        v-model="ruleForm.code">
                    <i style="margin-top: 14px" slot="prefix" class="el-icon-key"></i>
                </el-input>
                <el-button  class="subBtn" type="primary" size="mini" style="padding: 12px" @click="getCode($event);AskCode()">{{content}}</el-button>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div></div>
    </div>
<script src="plugin/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugin/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugin/axios/axios.min.js"></script>
<script src="js/register.js"></script>
<script>
    let app = new Vue({
        el:"#f_login_app",
        data() {
            var validateUserName = (rule, value, callback) => {
                if (value == '') {
                    callback(new Error('请输入用户名'));
                } else {
                    callback();
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value == '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value == '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var validateEmail = (rule, value, callback) => {
                if (value == '') {
                    callback(new Error('请输入邮箱'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    username:'',
                    password:'',
                    checkPass:'',
                    eMail:'',
                    code:''
                },
                userInfo:{
                    username:'',
                    password:'',
                    eMail:'',
                    code:''
                },
                mailFlag:false,
                content: '发送验证码',
                totalTime: 60,
                canClick: true,
                rules: {
                    username: [
                        { validator: validateUserName, trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    eMail: [
                        { validator: validateEmail, trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        this.userInfo.username = this.ruleForm.username
                        this.userInfo.password = this.ruleForm.password
                        this.userInfo.eMail = this.ruleForm.eMail
                        this.userInfo.code = this.ruleForm.code
                        let res = await registerApi(this.userInfo)
                        if(res.data.code==1){
                            this.$message({
                                message: res.data.data,
                                type: 'success'
                            });
                        }
                        setTimeout(window.location.href="/front/page/login.html",6000)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getCode(event){
                if(this.ruleForm.eMail!=''||this.ruleForm.eMail!=null){
                    this.mailFlag=true
                }else{
                    this.mailFlag=false
                }
                if (!this.canClick||!this.mailFlag) return
                this.canClick = false
                this.content = this.totalTime + 's后重新发送'
                let clock = window.setInterval(() => {
                    this.totalTime--
                    this.content = this.totalTime + 's后重新发送'
                    if (this.totalTime < 0) {
                        window.clearInterval(clock)
                        this.content = '重新发送验证码'
                        this.totalTime = 60
                        this.canClick = true
                    }
                },1000)
            },
            async AskCode(){
                let res = await getEmailCode(this.ruleForm.eMail)

            },
            checkPwd(e){
                console.log(e)
            }
        }
    })
</script>
</body>
</html>